<!--
 * @LastEditors: 杜康
 * @LastEditTime: 2021-12-27 09:41:21
-->
<template>
  <div class="login w-screen h-screen bg-local bg-cover flex items-center justify-around">
    <div class="w-96 h-96 bg-white rounded-3xl p-4 shadow-lg bg-opacity-75 flex flex-col items-center justify-center">
      <div class="h-36 rounded-full bg-blue-900 w-36 flex items-center justify-center avatar bg-cover"></div>
      <a-input
        class="mt-5"
        v-model:value="userName"
        placeholder="请输入账户"
      />
      <a-input-password
        class="mt-5"
        v-model:value="userPwd"
        placeholder="请输入密码"
      />
      <a-button
        class="mt-5"
        type="primary"
        block
        @click="loginIn"
      >登录</a-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
const userName = ref('')
const userPwd = ref('')
function loginIn() {
  // 示例模板，首先在Vuex中存放用户信息
  store.dispatch('saveName', userName.value)
  router.push({
    name: 'MainMenu',
    params: {
      userName: userName.value,
      userPwd: userPwd.value
    }
  })
}
</script>

<style lang="scss" scoped>
.login {
    background-image: url('../../../assets/images/login/bg2.jpg');

    .avatar {
        background-image: url('../../../assets/images/login/avatar.jpg');
    }
}
</style>